<template>
  <div>
  <el-table
    :data="tableData"
    height="600"
    style="width: 100%" >
    <div style="display: inline-block;" v-if="show">
    <el-table-column
      prop="did"
      label="医生did"
      width="180">
    </el-table-column>
    </div>
    <el-table-column
      prop="dname"
      label="医生姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="dhospital"
      label="所属医院"
      width="180">
    </el-table-column>
     <el-table-column
      prop="daddress"
      label="医院地址"
      width="280">
    </el-table-column>
    <el-table-column
      prop="depname"
      label="所属团队"
      width="120" >
    </el-table-column>
    <el-table-column
      prop="dtel"
      label="联系方式"
      width="130">
    </el-table-column>
       <el-table-column
      prop="otname"
      label="选择预约时间"
      width="180">
      <template slot-scope="scope">
  <el-select v-model="options.atime" value-key="options.atime" placeholder="请选择">
    <el-option 
      v-for="item in options"
      :key="item.atime"
      :value="item.atime"
      @click.native="selAppointmentRecord(item.atime,scope.row)"
      >
    </el-option>
  </el-select>
</template> 
    </el-table-column>
    <el-table-column
      label="操作">
       <template slot-scope="scope">
    <el-button  @click="goAppointment(scope.row)">确认预约</el-button>
    </template>
    </el-table-column>
  </el-table> 
      <!-- 提醒模态框开始 -->
    <el-dialog title="已预约该医生该天服务，请选择其它时间或其他医生!" :visible.sync="dialogFormVisible">
        <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
    </el-dialog>
    <!-- 提醒模态框结束 -->
  </div>
</template>

<script>
export default {
  mounted(){  
    this.updateTable();
    this.selAppointmentTime();
  },
  methods: {
      updateTable(){
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        this.$axios.post("patient-serv/patientinfo/selSignDocByPid/"+pid)
        .then((response)=>{
          let r=response.data;
          this.tableData=r.data;
        })},
      selAppointmentTime(){
      this.$axios.post("patient-serv/patientinfo/selAppointmentTime").then((response) => {
      let r=response.data;
      this.options=r.data;
        },)},
      selAppointmentRecord(atime,e){
       let info = JSON.stringify(atime);
       sessionStorage.setItem("atime", info);
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        let did=e.did;
        this.$axios.post("patient-serv/patientinfo/selAppointmentRecord/"+pid+"/"+did+"/"+atime).then((response) => {
          console.log(response.data.code);
          if(response.data.code==500){
            this.dialogFormVisible=true;
          }
        });
      },
      goAppointment(e){
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        let atime=JSON.parse(sessionStorage.getItem("atime"));
        let did=e.did;
        this.$axios.post("patient-serv/patientinfo/goAppointment/"+pid+"/"+did+"/"+atime).then((response) => {
          if(response.data.code==500){
            this.dialogFormVisible=true;
            return;
          }
          this.$message.success("恭喜预约成功");
        });
      },
        },
  data() {
      return {
        dialogFormVisible: false,
        show:false,
        tableData: [],
        options:[],
        pageSize:5,
        form:{
          pid:'',
          did:'',
          atime:'',
          astate:'未完成'
        }
      }
    }
  }
</script>

<style>
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .picture {
    width:100px;
    height: 90px; 
    border: 0px;
  }
</style>